<template>
	<view>
		<view class="">
			<view class="searchBox">
				<view class="search">
					<u-search v-model="typeData" placeholder="搜索场馆名称/地点/体育项目" @custom="queryEvent"></u-search>
				</view>
				<u-tabs :activeStyle="{
            color: '#fff',
            fontWeight: 'bold',
            transform: 'scale(1.05)',
          }" :inactiveStyle="{
            color: '#fff',
            transform: 'scale(1)',
          }" :list="venueList" lineColor="#fff" @click="click"></u-tabs>
			</view>
			<view class="">
				<u-subsection :current="current" :list="list" @change="sectionChange"></u-subsection>
			</view>
			<view v-if="listData.length > 0">
				<view v-for="(item,index) in listData" :key="index" class="listVenue">
					<view class="itemVenue" @click="venueClick(item.id)">
						<view class="itemTop">
							<img :src="item.venueMedias[0].img" alt="" class="topImg">
							<view class="topRight">
								<view class="topName">
									{{ item.name }}
								</view>
								<view class="topLocation">
									{{ item.location }}
								</view>
							</view>
						</view>
						<view class="itemNumber">
							<view class="numberBox">
								月预订数:{{ item.monthPreCount }}
							</view>
							<view class="typeBox">
								<view v-for="(params,parIndex) in item.dictIdTypeNames" class="typeItem">
									{{ params }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="moreBox">
					<view v-if="listData.length < total">
						<u-loadmore line loadmoreText="滑动加载更多" status="loadmore" @loadmore="loadmore" />
					</view>

					<view v-else>
						<u-loadmore line loadmoreText="到底了" status="loadmore" @loadmore="loadmore" />
					</view>
				</view>
			</view>

			<view v-if="listData.length == 0" class="">
				<u-empty icon="search" mode="search">
				</u-empty>
			</view>
		</view>

		<view style="padding-bottom: 200rpx;">

		</view>
		<zy-modal></zy-modal>
		<tabbar :index="1"></tabbar>
	</view>
</template>

<script>
	import {
		findDictTree,
		venuePage
	} from "@/api/challenge";
	import tabbar from "@/components/tabbar.vue";

	export default {
		components: {
			tabbar,
		},
		data() {
			return {
				typeData: "",
				venueList: [{
					name: "全部",
					id: "",
				}, ],
				list: ["综合排序", "距离最近", "预订最多"],
				current: 0,
				listData: [],
				dictIdTypeData: "",
				total: 0,
				pageNumber: 1,
				pageSize: 10
			};
		},
		onLoad() {
			findDictTree({
				rootName: "场地类型",
			}).then((res) => {
				console.log(res);
				res.forEach((item) => {
					this.venueList.push({
						name: item.name,
						id: item.id,
					});
				});
			});
			this.customEvent()
		},
		onReachBottom() {
			this.pageNumber += 1
			this.customEvent()
		},
		methods: {
			loadmore() {
				this.pageNumber += 1
				this.customEvent()
			},
			queryEvent() {
				this.pageNumber = 1
				this.customEvent()
			},
			venueClick(data) {
				console.log(data)
				uni.navigateTo({
					url: '/subpackageOne/venueRelated/venueDetails/venueDetails?id=' + data
				})
			},
			customEvent() {
				this.venuePageEvent({
					query: this.typeData,
					dictIdType: this.dictIdTypeData,
					sortForm: this.current + 1,
					pageNumber: this.pageNumber,
					pageSize: this.pageSize
				})
			},
			venuePageEvent(data) {
				for (let key in data) {
					if (data[key] == "") {
						delete data[key]
					}
				}
				venuePage(data).then(res => {
					if (this.pageNumber > 1) {
						res.records.forEach(item => {
							this.listData.push(item)
						})
						this.total = res.total
					} else {
						this.listData = res.records;
						this.total = res.total
					}
				})
			},
			click(item) {
				console.log("item", item);
				this.dictIdTypeData = item.id
				this.pageNumber = 1
				this.customEvent()
			},
			sectionChange(index) {
				var that = this
				that.current = index;

				if (index == 1) {
					this.pageNumber = 1
					that.customEvent()
				} else {
					this.pageNumber = 1
					that.customEvent()
				}

			},
		},
	};
</script>

<style lang="scss" scoped>
	.searchBox {
		padding: 20rpx;
		background: #009999;
	}

	.listVenue {
		.itemVenue {
			margin: 20rpx;
			padding: 10rpx 8rpx;
			box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.10);

			.itemTop {
				display: flex;

				.topImg {
					width: 200rpx;
					height: 160rpx;
				}

				.topRight {
					flex: 1;
					margin: 8rpx 10rpx 10rpx 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.topName {
						font-size: 36rpx;
						font-weight: 600;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.topLocation {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
				}
			}

			.itemNumber {
				padding-top: 14rpx;
				display: flex;
				border-top: 1px dashed #e5e5e5;

				.typeBox {
					margin-left: 20rpx;
					display: flex;
					flex-wrap: wrap;

					.typeItem {
						padding: 2rpx 16rpx;
						background-color: #009999;
						border-radius: 15rpx;
						color: #fff;
						margin: 0 10rpx;
					}
				}
			}
		}
	}

	.moreBox {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 200rpx;
	}
</style>